<template>
  <el-form ref="noticeForm" :model="notice" label-width="120px" class="article-form">
    <el-form-item label="通知标题" prop="title" :rules="titleRules">
      <el-input v-model="notice.title" placeholder="请输入通知标题"></el-input>
    </el-form-item>
    <el-form-item label="通知描述" prop="descripe" :rules="descriptionRules">
      <el-input v-model="notice.descripe" type="textarea" placeholder="请输入通知描述"></el-input>
    </el-form-item>
    <el-form-item label="通知内容" prop="content" :rules="contentRules">
      <el-input v-model="notice.content" type="textarea" placeholder="请输入通知内容"></el-input>
    </el-form-item>
    <el-form-item label="是否发布" prop="status">
      <el-switch v-model="notice.status"></el-switch>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">发布</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
    name:'addNotice',
    data(){
        return{
            notice: {
                title: '',
                descripe: '',
                content: '',
                status: false
            },
            titleRules: [
                { required: true, message: '通知标题不能为空', trigger: 'blur' },
                { min: 2, max: 15, message: '通知标题长度应为2-15个字符', trigger: 'blur' }
            ],
            descriptionRules: [
                { max: 50, message: '通知描述长度不能超过50个字符', trigger: 'blur' }
            ],
            contentRules: [
                { required: true, message: '通知内容不能为空', trigger: 'blur' },
                { min: 20, max: 5000, message: '通知内容长度应为20-5000个字符', trigger: 'blur' }
            ]          
        }
    },
    mounted(){
      this.initAuthority()
    },
    methods: {
      initAuthority(){
        this.$request.get("/role/authority",{
          params:{
            id: JSON.parse(localStorage.getItem("admin")).id,
            index: 4
          }
        })
        .then(res =>{
          this.Authority = res.data
          if(res.data == '1'){
            return
          }else{
            this.$message.error("你没有权限访问此功能")
            this.$router.push("/")
          }
        })
        .catch(err =>{
          console.log(err)
        })

      },
    submitForm() {
      this.$refs.noticeForm.validate(valid => {
        if (valid) {
          // 表单验证通过，执行提交逻辑
          console.log(123)
          this.submitArticle();
        }
      });
    },
    submitArticle() {
      // 这里执行发布文章的逻辑，可以发送请求给后端
      this.$request.put("/notice/create",this.notice)
      .then(res=>{
        this.$message({
            type:"success",
            message:"更新成功",
            showClose:true
        })
      }).catch(err=>{
        console.log(err)
      })
      console.log('发布文章:', this.notice);
    }
  }
}
</script>

<style>

</style>